<template>
    <vxe-modal v-model="systemMenuManagerStore.isShowAddSystemMenuModel"
        :loading="isFormLoading"
        :min-width="500"
        :width="800"
        :height="350"
        esc-closable
        show-footer
        title="新增菜单信息">
        <vxe-form
            ref="formRef"
            border
            title-background
            title-align="right"
            title-width="110"
            title-overflow
            :data="systemMenuAddFormData"
            :rules="formRules"
            :valid-config="{theme: 'normal'}">

            <vxe-form-item title="菜单编码"
                field="name"
                span="12"
                :item-render="{}"
                :title-prefix="{ content: '菜单编码，必须全局唯一', icon: 'vxe-icon-num-list' }">
                <template #default>
                    <vxe-input v-model="systemMenuAddFormData.name" placeholder="请输入菜单唯一编码" />
                </template>
            </vxe-form-item>

            <vxe-form-item title="菜单名称"
                field="title"
                span="12"
                :item-render="{}"
                :title-prefix="{ content: '菜单展示的名称', icon: 'vxe-icon-num-list' }">
                <template #default>
                    <vxe-input v-model="systemMenuAddFormData.title" placeholder="请输入菜单名称" />
                </template>
            </vxe-form-item>

            <vxe-form-item title="父级菜单"
                field="menuParentId"
                span="12"
                :item-render="{}"
                :title-prefix="{ content: '菜单所属的父级菜单', icon: 'vxe-icon-flow-branch' }">
                <template #default>
                    <vxe-select v-model="systemMenuAddFormData.menuParentId"
                        placeholder="请选择菜单所属的父级菜单"
                        clearable
                        filterable>
                        <vxe-option v-for="item in systemMenuManagerStore.getFilterTableDataList"
                            :key="item.id"
                            :value="item.menuId"
                            :label="item.title" />
                    </vxe-select>
                </template>
            </vxe-form-item>

            <vxe-form-item title="菜单图标"
                field="icon"
                span="12"
                :item-render="{}"
                :title-prefix="{ content: '菜单展示的图标', icon: 'vxe-icon-user' }">
                <template #default>
                    <vxe-select v-model="systemMenuAddFormData.icon" placeholder="请选择菜单图标" clearable filterable>
                        <template #default>
                            <vxe-option v-for="item in globalStore.iconList"
                                :key="item.id"
                                :value="item.icon"
                                :label="item.icon" />
                        </template>

                        <template #option="{ option }">
                            <i :class="option.label" style="margin-right: 10px"></i>
                            <span> {{ option.label }}</span>
                        </template>
                    </vxe-select>
                </template>
            </vxe-form-item>

            <vxe-form-item title="关联路由"
                field="routerLinkName"
                span="12"
                :item-render="{}"
                :title-prefix="{ content: '菜单点击时关联的路由', icon: 'vxe-icon-unlock' }">
                <template #default>
                    <vxe-select v-model="systemMenuAddFormData.routerLinkName"
                        placeholder="请选择要关联的路由"
                        clearable
                        filterable>
                        <vxe-option v-for="item in systemMenuManagerStore.routerConfigList"
                            :key="item.id"
                            :value="item.routerName"
                            :label="item.menuName" />
                    </vxe-select>
                </template>
            </vxe-form-item>
        </vxe-form>

        <template #footer>
            <vxe-button style="margin-left: 10px;"
                @click="cancelEdit"
                icon="vxe-icon-undo">
                取消
            </vxe-button>
            <vxe-button
                status="primary"
                icon="vxe-icon-save"
                @click="submitForm">
                保存
            </vxe-button>
        </template>
    </vxe-modal>
</template>

<script setup lang="ts">
import {useSystemMenuManagerStore} from "@/store/UseSystemMenuManagerStore.ts";
import {computed, onMounted, ref} from "vue";
import {DialogUtils} from "@/utils/DialogUtils.ts";
import {VxeFormInstance, VxeFormPropTypes} from "vxe-pc-ui";
import {StringUtils} from "@/utils/StringUtils.ts";
import {SystemMenuAddFormData} from "@/entiy/form/SystemMenuAddFormData.ts";
import {FormRuleValidateUtils} from "@/utils/FormRuleValidateUtils.ts";
import {useGlobalStore} from "@/store/UseGlobalStore.ts";

const globalStore = useGlobalStore();
const systemMenuManagerStore = useSystemMenuManagerStore();

const formRef = ref<VxeFormInstance<SystemMenuAddFormData>>();
const isFormLoading = ref<boolean>(false);
const systemMenuAddFormData = computed(() => systemMenuManagerStore.systemMenuAddFormData);

/**
 * 页面加载完成事件
 */
onMounted(async () => {
    try {
        await Promise.all([
            // 加载全部可配置为菜单连接的路由信息
            systemMenuManagerStore.getRouterConfigList()
        ]);
    } catch (reason) {
        DialogUtils.showUniqueDialog("加载数据失败");
    }
});

/**
 * 点击取消按钮事件
 */
const cancelEdit = () => {
    systemMenuManagerStore.isShowAddSystemMenuModel = false;
}

/**
 * 点击保存菜单信息按钮事件
 */
const submitForm = () => {
    isFormLoading.value = true;
    FormRuleValidateUtils.validate(formRef.value).then(() => {
        systemMenuManagerStore.addSystemMenu().then(() => {
            // 添加成功清除表单数据
            systemMenuManagerStore.systemMenuAddFormData = {} as SystemMenuAddFormData;
            systemMenuManagerStore.isShowAddSystemMenuModel = false;
        }).catch((reason) => {
            DialogUtils.showUniqueDialog(reason);
        }).finally(() => {
            isFormLoading.value = false;
        });
    }).catch((reason) => {
        console.log(reason.message);
    });
}

// 表单校验规则
const formRules = {
    name: [
        {required: true, content: '菜单编码不能为空'},
        {
            validator({itemValue}) {
                if (!StringUtils.checkSize(itemValue, 1, 32)) {
                    return new Error('长度超出范围[1-32]')
                }
            }
        }
    ],

    title: [
        {required: true, content: '菜单名称不能为空'},
        {
            validator({itemValue}) {
                if (!StringUtils.checkSize(itemValue, 1, 32)) {
                    return new Error('长度超出范围[1-32]')
                }
            }
        }
    ]
} as VxeFormPropTypes.Rules
</script>
